<template>
  <q-layout view="hHh lpR fFf" class="my-layout">
    <q-header elevated class="bg-grey-1 text-grey-10 head">
      <q-toolbar class="q-electron-drag">
        <q-btn flat dense round aria-label="Menu" class="q-electron-drag--exception"
               @click="leftDrawerOpen = !leftDrawerOpen ; $bus.$emit('onLeftDrawerOpen' , leftDrawerOpen)">
          <q-icon :name="leftDrawerOpen?'iconfont icontubiao-2':'iconfont icontubiao-22'"
                  style="font-size: 24px" color="primary" />
        </q-btn>

        <q-toolbar-title class="title text-weight-bold" style="z-index: 1">
          <div class="chilun chilun1 vertical-top q-electron-drag--exception q-mr-sm">
            <img src="statics/img/chilun1.png" width="32px" height="32px" class="chi chi1" alt="">
            <img src="statics/img/chilun2.png" width="18px" height="18px" class="chi chi2" alt="">
            <img src="statics/img/chilun3.png" width="10px" height="10px" class="chi chi3" alt="">
          </div>
          <span style="font-size: 20px">数字化精益平台</span>
          <!--          <span >-->
          <!--            {{userInfo.company_name?userInfo.company_name:headerName}}-->
          <!--          </span>-->
          <div class="chilun chilun2 vertical-bottom q-electron-drag--exception q-ml-sm">
            <img src="statics/img/chilun1.png" width="32px" height="32px" class="chi chi1" alt="">
            <img src="statics/img/chilun2.png" width="18px" height="18px" class="chi chi2" alt="">
            <img src="statics/img/chilun3.png" width="10px" height="10px" class="chi chi3" alt="">
          </div>
          <q-btn flat icon="iconfont icontubiao-13" label="控制台" style="margin-left: 20px" class="go-console" @click="goConsole" />
        </q-toolbar-title>
        <!--        右侧图标-->
        <div>
          <q-btn flat round class="font-size-12" icon="iconfont icontubiao5-26" @click="goShop">
            <q-tooltip>应用商城</q-tooltip>
          </q-btn>
          <q-btn flat round class="font-size-12" icon="iconfont iconxiaoxizhongxin" style="margin: 0 14px" @click="goDetail">
            <q-tooltip>公告详情</q-tooltip>
          </q-btn>
          <q-btn flat round class="font-size-12" icon="iconfont icontubiao-5" @click="goToMes">
            <q-tooltip>我的消息</q-tooltip>
            <div class="msg-circle" v-if="msgCount > 0 && permissions.includes(115)"></div>
          </q-btn>
          <!--          <q-btn dense flat size="16px" class="header-btn">-->
          <!--            <q-icon name="iconfont icontubiao-5" style="font-size: 18px" class="q-mr-sm">-->
          <!--              &lt;!&ndash;              <q-badge color="red" floating>4</q-badge>&ndash;&gt;-->
          <!--              &lt;!&ndash;              <span class="notice"></span>&ndash;&gt;-->
          <!--            </q-icon>-->
          <!--          </q-btn>-->
          <!--          <q-btn dense flat size="16px" to="/main/home">-->
          <!--            <q-icon name="iconfont icontubiao-13" style="font-size: 18px" class="q-mr-sm" />-->
          <!--            首页-->
          <!--          </q-btn>-->
          <span class="line"></span>
          <q-btn dense flat no-caps size="16px" class="header-btn" @mouseenter="showUserMenu" @mouseleave="hideUserMenu">
            <div class="photo" :style="{'backgroundImage': `url(${userPhoto || 'statics/shop/default.png'})`}"></div>
            <!--            <shop :src="userPhoto || 'statics/shop/default.png'" width="27px" height="27px">-->
            欢迎您，{{userInfo.user_nickname}}
            <q-menu v-model="userMenu" @mouseenter="showUserMenu" @mouseleave="hideUserMenu"
                    anchor="bottom right" fit self="top right" auto-close>
              <q-item clickable>
                <q-item-section v-go-back="'/main/user'">用户信息</q-item-section>
              </q-item>
              <q-item clickable @click="logout" v-if="!isHuawei && !isIMC">
                <q-item-section>注销</q-item-section>
              </q-item>
            </q-menu>
          </q-btn>
        </div>
      </q-toolbar>
    </q-header>

    <q-drawer
      v-model="isShowAllDown"
      :mini="leftDrawerOpen"
      @click.capture="drawerClick"
      content-class="bg-theme-1 text-white q-pt-xs"
      :width="198"
      show-if-above
      :breakpoint="100"
    >
      <!--    左侧目录树-->
      <q-scroll-area
        :thumb-style="thumbStyle"
        style="height: 100%;overflow: hidden"
      >
        <q-list class="nav-list">
          <q-expansion-item
            :icon="'iconfont '+menu.font"
            :label="menu.name" class="user-select-none"
            v-for="(menu, parentIndex) in menuList"
            :key="menu.id"
            group="menugroup"
            v-model="menu.open"
            :header-style="{ fontSize: '16px' }"
          >
            <q-list :header-inset-level="1">
              <!--              <q-item v-for="(item,index) in menu.children" :key="item.id"-->
              <!--                      :active="pageSelect.length >= 2 && item.id+'' === pageSelect[1].id+''"-->
              <!--                      active-class="bg-primary text-grey-1"-->
              <!--                      v-stat="{id: item.statId, name: item.name, position: 'page'}"-->
              <!--                      @click="goPage(item.link, index, parentIndex)"-->
              <!--                      clickable v-ripple class="q-pl-xl menu-child">-->
              <q-item v-for="(item,index) in menu.children" :key="item.id"
                      :active="pageSelect.length >= 2 && item.id+'' === pageSelect[1].id+''"
                      active-class="active-nav"
                      v-stat="{id:item.statId, name:item.name}"
                      @click="goPage(item.link, index, parentIndex)"
                      clickable v-ripple class="q-pl-xl menu-child">
                <q-item-section v-go-back="item.link" class="beforDot user-select-none">
                  <span class="dot"></span>{{item.name}}
                </q-item-section>
              </q-item>
            </q-list>
          </q-expansion-item>
        </q-list>
      </q-scroll-area>
    </q-drawer>

    <q-page-container>
      <q-page class="page-bg">
        <div class="guide">

          <!--          <q-breadcrumbs>-->
          <!--            <q-breadcrumbs-el v-for="(page, index) in pageSelect" :key="index"-->
          <!--                              :label="page.name" :to="page.link" class="text-subtitle1" />-->
          <!--          </q-breadcrumbs>-->

          <!--          &lt;!&ndash;用户指引&ndash;&gt;-->
          <!--          <a style="color: #5f77fd;cursor: pointer" class="iconfont  icontubiao-118" @click.stop="openGuidelines">-->
          <!--            <q-tooltip>-->
          <!--              用户指引-->
          <!--            </q-tooltip>-->
          <!--          </a>-->
          <div class="path">
            <q-btn @click="moveFootprint('left')" unelevated class="move-btn move-btn-left"
                   style="height:48px;background:#fff;color:#333333;padding:4px 2px;border-radius:0px">
              <q-icon size="1.6em" name="chevron_left" />
            </q-btn>
            <div class="footprint">
              <q-scroll-area ref="footprintScroll" :visible="false" horizontal class="footprint-scroll" :thumb-style="{backgroundColor:'transparent'}">
                <!--                <ul class="foot-print-list">-->
                <transition-group name="scaleX" tag="ul" class="foot-print-list">
                  <!--                  <li key="home" v-ripple class="foot-print-item relative-position" :class="{'active':pageSelect.length>0&&pageSelect[pageSelect.length-1].name==='首页'}">-->
                  <!--                    <span @click="goPage('/main/home')" class="ellipsis cursor-pointer">首页</span>-->
                  <!--                  </li>-->
                  <!--                  <transition-group name="scaleX">-->
                  <li v-ripple v-for="(item) in footprint" :key="item.id"
                      @click="goPage(item.link, item)"
                      class="foot-print-item relative-position" :class="{'active':pageSelect[pageSelect.length-1].name===item.name}">
                    <span class="ellipsis cursor-pointer" style="display: inline-block;width: 84px;vertical-align: middle">{{item.name}}</span>
                    <q-btn @click.stop="removeFootprint(item)" dense flat size="6px" class="footprint-close"
                           icon="iconfont icontubiao-67" v-show="item.name !== '首页'" />
                    <!--                    弹框-->
                    <q-menu touch-position context-menu>
                      <q-list dense style="min-width: 150px">
                        <q-item clickable v-close-popup @click="removeFootprint(item)" v-show="item.name !== '首页'">
                          <q-item-section>关闭当前</q-item-section>
                        </q-item>
                        <q-item clickable v-close-popup @click="clearFootprint" v-show="item.name !== '首页'">
                          <q-item-section>关闭所有</q-item-section>
                        </q-item>
                        <q-item clickable v-close-popup @click="removeFootprintOther(item)">
                          <q-item-section>关闭其他</q-item-section>
                        </q-item>
                      </q-list>
                    </q-menu>
                  </li>
                </transition-group>
                <!--                </ul>-->
              </q-scroll-area>
            </div>
            <q-btn @click="moveFootprint('right')" unelevated class="move-btn move-btn-right"
                   style="border-right:1px solid #cfd6fe;height:48px;background:#fff;color:#333333;padding:4px 2px;border-radius:0px">
              <q-icon size="1.6em" name="chevron_right" />
            </q-btn>
          </div>
          <div v-if="!isIMC" class="dashboard" @click="goDashboard"><q-icon name="img:statics/svg/dashboard.svg" class="dashboard-icon margin-r-10"></q-icon> <span class="dashboard-name">可视化报表</span></div>
          <!--          <q-btn @click="refreshFun" v-throttle class="refresh-btn" unelevated size="16px" color="white" text-color="#333" style="width:96px;">
                      <q-icon size="16px" name="iconfont icontubiao-140" style="margin-right: 7px" />
                      刷新
                    </q-btn>-->
        </div>
        <!--        我的足迹-->
        <!--        <q-btn @click="showFootPrint" round color="primary" icon="iconfont icontubiao-70" class="fixed footprint" />-->
        <div class="content q-pa-lg scrollbar">
          <keep-alive :include="saveInfo">
            <router-view :key="$route.path"/>
          </keep-alive>
          <!--          <router-view v-if="!saveInfo[$route.path]" />-->
        </div>
      </q-page>
    </q-page-container>
    <!--    <footprint-dialog ref="footPrintDialog" :footprint="footprint" @removeFootprint="removeFootprint"></footprint-dialog>-->
  </q-layout>
</template>

<script>
import { mapActions, mapGetters, mapMutations } from 'vuex'
import { logout } from 'src/boot/login/login'
import { menuListData } from 'src/assets/js/menu-list'
import { loadRefreshToken, loadToken, removeRefreshToken, removeToken, translateToken } from 'yz-help'
import { goLoginPage } from '../permission'
import { getUser } from '../boot/home/user'
import MESMIXIN from '../pages/factory/mine-message/components/mes-mixin.js'

export default {
  name: 'MyLayout',
  mixins: [ MESMIXIN ],
  data () {
    return {
      updateDialog: false,
      percentage: 0,
      clickCount: 0, // 点击次数，打开和关闭控制台
      countDown: 3, // 倒计时
      timer: null, // 定时器
      // updateVersion: '',
      leftDrawerOpen: false, // 是否显示左侧连接树
      isShowAllDown: true, // 是否显示左侧连接树
      miniState: false, // 是否显示左侧连接树
      // isMaximize: false, // 是否是最大化
      userMenu: false, // 控制用户menu的显示
      userMenuTime: null,
      // 获取动态菜单数据
      menuList: [],
      navList: [],
      menuListData: [], // 存储MenuListData数据
      menuActive: [], // 左侧菜单的位置
      thumbStyle: this.CommonConfig.thumbStyle, // 滚动条样式
      saveInfo: '', // 需要缓存的页面
      photoUrl: '', // 头像
      /**
       * 不缓存的页面
       * 消息列表，角色定义，本地和机床，本地和云端，机床和云端，派工，工时定额，计划进度，机台状态
       * **/
      saveElseInfo: ['message', 'roleDefine', 'localMachine', 'localCloud', 'deviceCloud',
        'dispatch', 'productionDispatch', 'hourNorm', 'planProgress', 'machine', 'machineDetail', 'message'],
      reload: true
    }
  },
  computed: {
    ...mapGetters([
      'isMaximize',
      'headerName',
      // 'navList',
      'pageSelect',
      'footprint',
      'userInfo',
      'permissions',
      'userPhoto',
      'client'
    ]),
    isHuawei () {
      return this.userInfo.channel === 'hw' && this.userInfo.client_id === 'huawei_iot_stage_app'
    },
    isIMC () {
      return this.userInfo.client_id === process.env.IMC_CLIENT_ID
    }
  },
  watch: {
    $route (to, from) {
      this.getMenuActive()
    },
    // 获取动态菜单
    permissions () {
      this.setMenuListData()
      this.menuList = this.initMenuList(this.navList)
      this.getMenuActive()
    }
  },
  beforeDestroy () {
    this.disconnect()
  },
  created () {
    this.getInfo()
    this.getWebScoket()
    // 路由 callback
    this.$router.afterEach((to, from) => {
      let fromPath = from.path
      if (fromPath.indexOf('/login') > -1) {
        this.clearFootprint()
      }
    })
  },
  mounted () {
    // 显示加载动画
    this.$q.loading.show()
    setTimeout(() => {
      this.$q.loading.hide()
    }, 1000)
  },
  methods: {
    // 断开连接
    disconnect () {
      if (this.client) {
        this.client.disconnect(() => {
          console.log('断开连接')
        })
      }
    },
    getInfo () {
      // 解析token
      let token = loadToken()
      let refreshToken = loadRefreshToken()
      let info = translateToken(token)
      if (!(info.subsystem_privileges && info.subsystem_privileges.indexOf(this.Enums.SUBSYSTEM_PRIVILEGES.DLP.value) !== -1)) {
        // 无权限前往401
        console.log(info, '用户信息，无权限前往401')
        this.$q.dialog({
          title: `<p class="dialog-notice-title"><i class="iconfont icontubiao-28"></i>暂无权限，请联系管理员开通权限</p>`,
          persistent: true,
          html: true,
          ok: {
            unelevated: true,
            label: '确认'
          }
        })
          .onOk(() => {
            console.log(process.env.PLATFORM_PATH, '1111')
            window.location.href = process.env.PLATFORM_PATH
          })
      }
      let authorities = info.authorities
      let refreshInfo = translateToken(refreshToken)
      let refreshExp = refreshInfo.exp
      this.saveCommonInfo(info, authorities)
      this.set_refreshExp(refreshExp)
      // 存储客制化设置数据
      this.saveCustomerSet()
      // 设置menu
      this.setMenuListData()
      this.menuList = this.initMenuList(this.navList)
      this.getMenuActive()

      // delete info.authorities
      this.getUserInfo(this.userInfo.user_id)
    },
    getUserInfo (userId) {
      getUser(userId).then(res => {
        this.set_userPhoto(res.data.photoUrl)
      })
    },
    // 退出登录
    logout () {
      logout().finally(() => {
        removeToken()
        removeRefreshToken()
        this.disconnect()
        goLoginPage()
      })
    },
    // 初始化menuList数据
    initMenuList (info) {
      let menuList = info.map(item => {
        return {
          ...item,
          open: false
        }
      })
      return menuList
    },
    setMenuListData () {
      let menuPage = Object.entries(this.Enums.SYS_PERMISSION)
        .filter(entry => (entry[1].type === 'PAGE' || entry[1].type === 'MENU_LEVEL_ONE') && this.permissions.indexOf(entry[1].value) > -1)
      this.menuListData = []
      this.navList = []
      let menuData = JSON.parse(JSON.stringify(menuListData))
      menuData.forEach(menu => {
        let children = null
        let findIndex = menuPage.findIndex(item => {
          return menu.desc === item[1].name
        })
        if (findIndex >= 0) {
          children = menu.children.filter((child, childIndex) => {
            let findIndex2 = menuPage.findIndex(item => {
              return item[1].name === child.desc
            })
            return findIndex2 > -1
          })
          menu.children = children
        }
        if (findIndex >= 0 || menu.name === '首页' || menu.name === '个人中心' || menu.name === '消息列表' || menu.name === '应用商城') {
          this.menuListData.push(menu)
        }
        if (findIndex >= 0) {
          this.navList.push(menu)
        }
      })
    },
    // 设置菜单展开
    setMenuOpen (item) {
      for (let i = 0; i < this.menuList.length; i++) {
        if (this.menuList[i].id === item.id) {
          this.menuList[i].open = true
          break
        }
      }
    },
    /**
     * refactor 获取菜单函数
     * arr 菜单列表
     * isChildren 是否子集
     * url 路径地址
     */
    getChildrenPath (arr, isChildren, url) {
      let isFind = false
      for (let i = 0; i < arr.length; i++) {
        if (url.includes(arr[i].link)) {
          if (!isChildren) {
            this.menuActive = [i]
            this.setMenuOpen(arr[i])
          } else {
            this.menuActive.push(i)
          }
          isFind = true
          if (Object.is(url, arr[i].link)) {
            break
          }
          let menu1 = arr[i].children
          if (menu1.length > 0) {
            this.getChildrenPath(menu1, true, url)
          }
        }
      }
      return isFind
    },
    // 获取当前菜单的位置
    getMenuActive () {
      let url = this.$route.path
      // 循环菜单展示情况
      let isFind = this.getChildrenPath(this.menuListData, false, url)
      // 若当前页面存在于菜单中，展开对应菜单项
      if (isFind) {
        // 打开左侧目录的相应位置
        if (this.menuList[this.menuActive[0]]) {
          this.menuList[this.menuActive[0]].open = true
        }
        // 设置面包屑数据
        this.setBreadcrumbs()
        // 设置我的足迹数据
        this.saveFootprint()
      }
    },
    // 跳转页面
    goPage (link, item) {
      if (item && item.query && JSON.stringify(item.query) !== '{}') {
        this.$router.push({
          path: link,
          query: item.query
        })
      } else {
        this.$router.push(link)
      }
    },
    // 设置面包屑位置的数据
    setBreadcrumbs () {
      let pageSelect = []
      this.menuActive.forEach((item, index) => {
        let data = this.menuListData[this.menuActive[0]]
        if (index > 0) {
          for (let i = 1; i <= index; i++) {
            data = JSON.parse(JSON.stringify(data.children[this.menuActive[i]]))
          }
        }
        const info = {
          id: data.id,
          name: data.name,
          link: index > 0 ? data.link : null
        }
        pageSelect.push(info)
      })
      this.set_page_select(pageSelect)
    },
    // 保存到我的足迹
    saveFootprint () {
      let data = this.menuListData
      for (let i = 0; i < this.menuActive.length; i++) {
        data = data.children ? data.children[this.menuActive[i]] : data[this.menuActive[i]]
      }
      let footprint = JSON.parse(JSON.stringify(this.footprint))
      const findIndex = this.footprint.findIndex(item => {
        return Number(item.id) === Number(data.id)
      })
      let query = this.$route.query
      if (footprint.length === 0 && data.name !== '首页') {
        footprint.push({
          name: '首页',
          link: '/main/home',
          id: 10000,
          desc: 'home',
          query: {}
        })
      }
      if (findIndex === -1) {
        footprint.push({
          name: data.name,
          link: data.link,
          id: data.id,
          desc: this.getKebabCase(data.desc),
          query
        })
        if (footprint.length > 10) {
          let deleteIndex = 0
          footprint = footprint.filter((item, index) => {
            if (item.name === '首页') {
              deleteIndex++
              return true
            }
            return index !== deleteIndex
          })
        }
        this.set_footprint(footprint)
        // saveElseInfo
        // let saveDesc = footprint.map(item => {
        //   return item.desc
        // })
        let saveDesc = []
        footprint.forEach(foot => {
          if (this.saveElseInfo.indexOf(foot.desc) === -1) {
            saveDesc.push(foot.desc)
          }
        })
        this.saveInfo = saveDesc
        this.$nextTick(() => {
          if (this.$refs.footprintScroll && this.$refs.footprintScroll.setScrollPosition) {
            this.$refs.footprintScroll.setScrollPosition(footprint.length * 128, 200)
          }
        })
      } else if (JSON.stringify(query) !== JSON.stringify(footprint[findIndex].query)) {
        footprint[findIndex].query = query
        this.set_footprint(footprint)
      }
    },
    // 将驼峰命名的字符串转变成短横线命名的字符串
    getKebabCase (str) {
      return str.replace(/[A-Z]/g, (item) => {
        return '-' + item.toLowerCase()
      })
    },
    // 清空足迹
    clearFootprint () {
      this.set_footprint([])
      this.$refs.footprintScroll.setScrollPosition(0)
      this.saveInfo = []
      if (this.$route.path !== '/main/home') {
        this.$router.push('/main/home')
      }
    },
    // 显示用户menu
    showUserMenu () {
      clearTimeout(this.userMenuTime)
      this.userMenu = true
    },
    hideUserMenu () {
      this.userMenuTime = setTimeout(() => {
        this.userMenu = false
      }, 100)
    },
    // 移除一条我的足迹数据
    removeFootprint (removeItem) {
      let isCur = this.pageSelect[this.pageSelect.length - 1].name === removeItem.name
      let curIndex = this.footprint.findIndex(item => item.name === removeItem.name)
      const footprint = this.footprint.filter(item => {
        return item.name !== removeItem.name
      })
      this.set_footprint(footprint)
      let saveDesc = footprint.map(item => {
        return item.desc
      })
      this.saveInfo = saveDesc
      // 如果关闭的是当前一个就跳转到上一个
      if (isCur) {
        if (footprint.length > 0) {
          this.$router.push(
            {
              path: footprint[curIndex - 1].link,
              query: {
                ...footprint[curIndex - 1].query
              }
            }
          )
        } else {
          this.$router.push('/main/home')
        }
      }
    },
    // 移除其他
    removeFootprintOther (item) {
      let footprint
      if (item.name !== '首页') {
        let home = this.footprint.filter(i => {
          return i.name === '首页'
        })
        footprint = [...home, item]
        this.saveInfo = [home.desc, item.desc]
      } else {
        footprint = [item]
        this.saveInfo = [item.desc]
      }
      this.set_footprint(footprint)
      if (this.$route.path !== item.link) {
        this.$router.push(item.link)
      }
    },
    // 路径导航-左右移动
    moveFootprint (direction) {
      let position = this.$refs.footprintScroll.getScrollPosition()
      position = direction === 'right' ? position + 128 : position - 128
      this.$refs.footprintScroll.setScrollPosition(position, 200)
    },
    getScrollPosition (type) {
      let flag = false
      this.$nextTick(() => {
        const position = this.$refs.footprintScroll.getScrollPosition()
        type === 'left' && (flag = !position)
        console.log(position, flag, 'ScrollPosition')
      })

      return flag
    },
    // 消息内容
    goToMes () {
      // 115 是我的消息页面的枚举id
      if (!this.permissions.includes(115)) return
      this.$router.push('/main/factory/mine-message')
    },
    goDetail () {
      this.$router.push('/main/home/news/news-detail_2')
    },
    goShop () {
      this.$router.push('/main/shop')
    },
    goConsole () {
      if (this.isHuawei) {
        window.open(process.env.PLATFORM_PATH + 'console/overview' + '?utm_source=huawei', '_blank')
      } else {
        window.open(process.env.PLATFORM_PATH + 'console/overview', '_blank')
      }
    },
    goDashboard () {
      if (this.isHuawei) {
        window.open(process.env.DASHBOARD_URL + '?utm_source=huawei', '_blank')
      } else {
        window.open(process.env.DASHBOARD_URL, '_blank')
      }
    },
    // 点击菜单图标
    drawerClick () {
      if (!this.leftDrawerOpen) return
      this.leftDrawerOpen = !this.leftDrawerOpen
      this.$bus.$emit('onLeftDrawerOpen', this.leftDrawerOpen)
    },
    ...mapMutations({
      'set_isMaximize': 'SET_ISMAXIMIZE',
      'set_headerName': 'SET_HEADERNAME',
      'set_userInfo': 'SET_USERINFO',
      'set_routerList': 'SET_ROUTERLIST',
      'set_navList': 'SET_NAVLIST',
      'set_page_select': 'SET_PAGESELECT',
      'set_footprint': 'SET_FOOTPRINT',
      'set_token': 'SET_TOKEN',
      'set_refreshtoken': 'SET_REFRESHTOKEN',
      'set_refreshExp': 'SET_REFRESHTOKENEXP',
      'set_guideLines': 'SET_GUIDELINES', // 更改用户指引状态,
      'set_permissions': 'SET_PERMISSIONS', // 更改权限数组
      'set_userPhoto': 'SET_USERPHOTO', // 更改权限数组
      'set_refresh': 'SET_REFRESH' // 刷新当前页面
    }),
    ...mapActions([
      'getWebScoket',
      'saveCommonInfo',
      'saveCustomerSet',
      'getMsgRead' // 获取未读信息
    ])
  }
}
</script>

<style scoped lang="stylus">
.dashboard{
  /*position absolute;
  right 30px;
  top 0px;*/
  height 48px
  width 150px
  cursor pointer;
  padding 0 10px;
  border-radius 0;
  transition background 0.3 cubic-bezier(0.25, 0.8, 0.5, 1)
  &:hover{
    background #cfd6fe
  }

  .dashboard-icon{
    font-size 24px;
    line-height 48px
    margin-top -2px
  }

  .dashboard-name{
    line-height 48px
  }
}
.q-toolbar{
  padding 0 14px 0 24px
}
.photo{
  margin-right 10px
  border-radius 50%
  overflow hidden
  height 30px
  width 30px
  background-position center
  background-size cover
  background-repeat no-repeat
}
.my-layout {
  .head {
    height 50px
    line-height 50px
    min-width 375px
  }

  .title {
    margin-left 8px
    line-height 50px
    &:hover {
      cursor pointer
    }
    .chilun {
      position relative
      display inline-block
      width 44px
      height 40px

      &:hover {
        .chi1 {
          transform rotate(100deg)
        }

        .chi2 {
          transform rotate(-190deg)
        }

        .chi3 {
          transform rotate(-300deg)
        }
      }
    }

    .chi {
      position absolute
      transform rotate(0deg)
      transition transform 1000ms linear
    }

    .chilun1 {
      .chi1 {
        top 0
        left 0
      }

      .chi2 {
        bottom 0
        right 0
      }

      .chi3 {
        right 2px
        top 13px
      }
    }

    .chilun2 {
      .chi1 {
        bottom 0
        right 0
      }

      .chi2 {
        top 0
        left 0
      }

      .chi3 {
        left 2px
        bottom 13px
      }
    }
  }

  .notice {
    position absolute
    top 0px
    right -1px
    width 6px
    height 6px
    border-radius 3px
    display inline-block
    background-color $negative
  }
  .header-btn.q-btn--dense{
    padding 10px
  }

  .line {
    width 1px
    height 12px
    display inline-block
    margin 0 10px
    background-color #D3D3D3
    vertical-align middle
  }

  .page-bg {
    background-color #ECEFF6
    .guide{
      height 48px
      background-color #ffffff
      box-shadow:0px 1px 1px 0px rgba(0, 0, 0, 0.05)
      display flex
      .path{
        width 100%
        height 100%
        display flex
        justify-content space-between
        font-size 14px
        .footprint{
          flex 1 auto
          .footprint-scroll{
            width 100%
            height 100%
          }
        }
        .foot-print-list{
          white-space nowrap
          color #333
          .foot-print-item{
            display inline-block
            padding 15px 0
            width 120px
            text-align center
            line-height 18px
            border-right 1px solid #cfd6fe
            transform-origin left center
            overflow-x hidden
            white-space: nowrap
            &.active{
              background-color #cfd6fe
            }
            &:hover{
              background-color #e8ebff
            }
          }
          .footprint-close{
            display inline-block
            width 18px
            height 18px
            min-width 18px
            min-height 18px
            margin-left 4px
            color #999
            transition all ease-in .2s
            &:hover{
              color #fff
              background-color rgba(0,0,0,.2)
            }
          }
        }
        .move-btn{
          flex 24px 0
        }
        .move-btn-left{
          box-shadow:1px 0px 3px 0px rgba(0, 0, 0, 0.15);
        }
        .move-btn-right{
          box-shadow:-1px 0px 3px 0px rgba(0, 0, 0, 0.15);
        }
      }
    }
  }

  .beforDot {
    position relative

    &:before {
      content '•'
      display inline-block
      position absolute
      left -16px
    }
  }

  .menu-child {
    min-height 40px
    color #999
  }

  .content {
    border-radius 6px
    height calc(100vh - 98px)
    overflow: auto;

    div:first-child {
      min-width 1280px
    }

    div:first-child::-webkit-scrollbar{
      width:8px;
      height:20px;
      /**/
    }

    & > div {
      height 100%
    }
  }

  .footprint {
    right 24px
    bottom 94px
    z-index 20
  }
}
.scaleX-enter-active {
  transition width ease .2s
}
.scaleX-leave-active {
  transition width ease .2s
}
.scaleX-enter, .scaleX-leave-to {
  // transform: scaleX(0)
  width 0px !important
}
.msg-circle{
  height 8px
  width 8px
  background red
  border-radius 50%
  position absolute
  right 5px
  top 5px
}
.nav-list{
  >>>.q-expansion-item__content{
    background-color: #131e38
  }
}

>>>.q-item{
  transition background 500ms ease-in
}
.active-nav{
  color #FFFFFF !important
  background: linear-gradient(90deg, rgba(95, 119, 253, 0.8), rgba(95, 119, 253, 0.3))
  &:before{
    background-color #5F77FD
    content ''
    display inline-block
    width 8px
    height 40px
    position absolute
    top 0
    left 0 !important
  }
}
.go-console{
  >>>.q-icon{
    font-size 12px
  }
  >>>.on-left{
    margin-right 6px
  }
}
</style>
